import React, { useEffect, useRef } from 'react';
import G6 from '@antv/g6';
const PushPath = () => {
  const containerRef = useRef(null);
  let nodeObj = {
    x: -60,
    y: -20,
    width: 120,
    height: 40,
  };

  useEffect(() => {
    if (!containerRef.current) return;

    /**
     * 自定义边
     */
    G6.registerEdge(
      'customEdge',
      {
        draw(cfg: any, group: any) {
          const startPoint = cfg.startPoint;
          const endPoint = cfg.endPoint;
          const shape = group.addShape('path', {
            attrs: {
              // 边的颜色
              stroke: '#44d7b6',
              // 末尾端的箭头，为true时的箭头效果
              endArrow: {
                path: 'M 0,0 L 8,4 L 8,-4 Z',
                fill: '#44d7b6', // 箭头填充色
                arrowSolid: true, // 箭头是否实心
              },
              // 绘制边的路径
              path: [
                ['M', startPoint.x, startPoint.y],
                ['L', startPoint.x, (startPoint.y + endPoint.y) / 2],
                ['L', endPoint.x, (startPoint.y + endPoint.y) / 2],
                ['L', endPoint.x, endPoint.y],
              ],
            },
          });
          return shape;
        },
      },
      'cubic',
    );

    /**
     * 自定义节点
     */
    G6.registerNode(
      'rect',
      {
        draw(cfg: any, group: any) {
          const { depth } = cfg;
          // 跟进序号判断节点的层级，调整宽高大小
          if (depth === 0) {
            nodeObj = {
              x: -40,
              y: -10,
              width: 80,
              height: 20,
            };
          } else {
            nodeObj = {
              x: -40,
              y: -15,
              width: 80,
              height: 30,
            };
          }
          const { x, y, width, height } = nodeObj;
          const shape = group.addShape('rect', {
            attrs: {
              x,
              y,
              width,
              height,
              // 节点背景颜色
              fill: cfg.rectFill,
              // 节点边框颜色
              stroke: cfg.rectStroke,
              radius: 10,
            },
          });
          if (cfg.label) {
            group.addShape('text', {
              attrs: {
                textAlign: 'center',
                textBaseline: 'middle',
                text: cfg.label,
                // 文本字体颜色
                fill: cfg.textFill,
                fontSize: 8,
              },
            });
          }
          return shape;
        },
      },
      'single-node',
    );

    const graph = new G6.TreeGraph({
      container: containerRef.current,
      width: 1400,
      height: 640,
      modes: {
        default: ['drag-canvas', 'zoom-canvas'],
      },
      fitView: true,
      fitCenter: true,
      // 默认状态下节点的配置
      defaultNode: {
        type: 'rect',
        // 指定连入节点的连接点位置
        anchorPoints: [
          [0.5, 0],
          [0.5, 1],
        ],
      },
      // 默认状态下边的配置
      defaultEdge: {
        type: 'customEdge',
        // 边节点的像素大小
        size: 1,
      },
      layout: {
        type: 'compactBox',
        // 上下布局
        direction: 'TB',
        getId: function getId(d) {
          return d.id;
        },
        getHeight: function getHeight() {
          return 6;
        },
        getWidth: function getWidth() {
          return 16;
        },
        getVGap: function getVGap() {
          return 40;
        },
        getHGap: function getHGap() {
          return 70;
        },
      },
    });
    const data = {
      id: 'node1',
      label: '参数中心(BPMC)',
      rectFill: '#C6E5FF',
      rectStroke: '#5B8FF9',
      textFill: '#00BFFF',
      children: [
        {
          id: 'node1-1',
          label: '子集副本中心\nLine应用单元(001)',
          rectFill: '#32c5ff1a',
          rectStroke: '#32c5ff',
          textFill: '#32c5ff',
          children: [
            {
              id: 'node1-1-1',
              label: '信用卡中心(018)',
              rectFill: '#44d7b61a',
              rectStroke: '#44d7b6',
              textFill: '#44d7b6',
            },
            {
              id: 'node1-1-2',
              label: '内联平台(800)',
              rectFill: '#44d7b61a',
              rectStroke: '#44d7b6',
              textFill: '#44d7b6',
            },
            {
              id: 'node1-1-3',
              label: '内联平台(800)',
              rectFill: '#44d7b61a',
              rectStroke: '#44d7b6',
              textFill: '#44d7b6',
            },
          ],
        },
        {
          id: 'node1-2',
          label: '子集副本中心\nLine网关单元(902)',
          rectFill: '#32c5ff1a',
          rectStroke: '#32c5ff',
          textFill: '#32c5ff',
          children: [
            {
              id: 'node1-2-1',
              label: '管理网关(808)',
              rectFill: '#44d7b61a',
              rectStroke: '#44d7b6',
              textFill: '#44d7b6',
            },
            {
              id: 'node1-2-2',
              label: '管理网关(808)',
              rectFill: '#44d7b61a',
              rectStroke: '#44d7b6',
              textFill: '#44d7b6',
            },
          ],
        },
        {
          id: 'node1-3',
          label: '子集副本中心\nLine公共单元(904)',
          rectFill: '#32c5ff1a',
          rectStroke: '#32c5ff',
          textFill: '#32c5ff',
          children: [
            {
              id: 'node1-3-1',
              label: '计算流程引擎(890)',
              rectFill: '#44d7b61a',
              rectStroke: '#44d7b6',
              textFill: '#44d7b6',
            },
            {
              id: 'node1-3-2',
              label: '智能规则引擎(820)',
              rectFill: '#44d7b61a',
              rectStroke: '#44d7b6',
              textFill: '#44d7b6',
            },
            {
              id: 'node1-3-3',
              label: '风控限额服务(070)',
              rectFill: '#44d7b61a',
              rectStroke: '#44d7b6',
              textFill: '#44d7b6',
            },
            {
              id: 'node1-3-4',
              label: '风控限额服务(070)',
              rectFill: '#44d7b61a',
              rectStroke: '#44d7b6',
              textFill: '#44d7b6',
            },
          ],
        },
      ],
    };

    graph.data(data);
    graph.render();
    graph.stopAnimate();
    graph.fitView();

    return () => {
      graph.destroy();
    };
  }, []);

  return <div ref={containerRef} style={{ height: 500, width: '100%' }} />;
};

export default PushPath;
